<template>
  <!-- 输入框类型 -->
  <wd-input
    v-if="type === 'input'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :clearable="clearable"
    :value="modelValue"
    :placeholder="placeholder"
    :type="inputType"
    @input="handleInput"
    @clear="handleClear"
  />

  <!-- 弹出选择器类型 -->
  <wd-picker
    v-else-if="type === 'picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :columns="columns"
    :placeholder="placeholder"
    @confirm="handleConfirm"
    @change="handleChange"
  />

  <!-- 日期时间选择器类型 -->
  <wd-datetime-picker
    v-else-if="type === 'datetime-picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :placeholder="placeholder"
    :formatter="formatter"
    :type="datetimeType"
    :is-range="isRange"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :display-format-tab-label="displayFormatTabLabel"
    :tabs="tabs"
    @confirm="handleConfirm"
    @change="handleChange"
  />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  // 基础属性
  label: { type: String, required: true },
  labelWidth: { type: String, default: '120px' },
  prop: { type: String, required: true },
  modelValue: { type: [String, Number, Array, Date], default: () => [] },
  placeholder: { type: String, default: '' },
  
  // 组件类型
  type: {
    type: String,
    default: 'input',
    validator: (val) => ['input', 'picker', 'datetime-picker'].includes(val)
  },

  // 输入框属性
  clearable: { type: Boolean, default: false },
  inputType: { type: String, default: 'text' },

  // 选择器属性
  columns: { type: Array, default: () => [] },
  
  // 日期时间选择器属性
  formatter: { type: Function },
  datetimeType: { type: String, default: 'datetime' },
  displayFormatTabLabel: { type: Function },
  isRange: { type: Boolean, default: false },
  startPlaceholder: { type: String },
  endPlaceholder: { type: String },
  tabs: { type: Array, default: () => ['date', 'time'] }
})

const emit = defineEmits(['update:modelValue', 'input', 'clear', 'change', 'confirm'])

// 输入事件处理
const handleInput = (value) => {
  emit('update:modelValue', value)
  emit('input', value)
}

// 清除事件处理
const handleClear = () => {
  emit('update:modelValue', props.isRange ? [] : '')
  emit('clear')
}

// 确认事件处理
const handleConfirm = (event) => {
  emit('update:modelValue', event.value)
  emit('confirm', event)
}

// 变化事件处理
const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
/* 日期时间选择器Tab样式优化 */
::v-deep .wd-datetime-picker {
  --wd-datetime-picker-tabs-height: 44px;
}

::v-deep .wd-datetime-picker__tabs {
  display: flex !important;
  visibility: visible !important;
  margin: 0 16px;
  border-bottom: 1px solid #eee;
}

::v-deep .wd-datetime-picker__tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  position: relative;
}

::v-deep .wd-datetime-picker__tab--active {
  color: #1890ff;
  font-weight: 500;
}

::v-deep .wd-datetime-picker__tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

/* 范围选择器样式 */
::v-deep .wd-datetime-picker.is-range {
  display: flex;
  align-items: center;
}

::v-deep .wd-datetime-picker.is-range .wd-datetime-picker__input {
  width: calc(50% - 16px) !important;
}

::v-deep .wd-datetime-picker__separator {
  margin: 0 8px;
  color: #999;
}
</style>
    